<template>
  <div class="index">
    <div class="head">
      <i class="ic_left"
        ><img src="@/assets/images/ic_group_search_small.png" alt=""
      /></i>
      <i class="ic_center"
        ><img src="@/assets/images/ic_scan_gray.png" alt=""
      /></i>
      <i class="ic_right"
        ><img src="@/assets/images/group_chat_20_oval.png" alt=""
      /></i>
      <input type="text" class="serch" />
      <div class="talk"></div>
    </div>
    <div
      class="rotater"
      :style="{
        'background-image':
          'url(' + require(`@/assets/images/banner/0${current + 1}.jpg`) + ')',
      }"
    >
      <div class="point-box">
        <li
          class="point"
          v-for="(x, index) in list"
          :key="x.id"
          :class="[x.id == current ? 'point-active' : '']"
          @click=""
        ></li>
      </div>
    </div>
    <div class="hot">
      <div class="hot-head">
        <p>热点</p>
      </div>
      <div class="hot-li">
        <li v-for="(x,index) in list2" :key="index">
          <div class="hot-content">
            <img :src="require(`@/assets/images/${x.src}.jpg`)" />
            <p>{{x.title}}</p>
            <span>{{x.content}}</span>
          </div>          
          <span> 作者：{{x.author}} </span>
        </li>
      </div>
    </div>
    home
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      src: "",
      current: 0,
      list: [{ id: 0 }, { id: 1 }, { id: 2 }],
      list2: [
        {
          title: "《加勒比海盗》14年老粉给你带哎所有彩蛋和深埋梗",
          content: "此影评送给那些不离不弃的老粉和船长杰克：斯派罗",
          src:"media",
          author: "女神的秋裤",
        },
        {
          title: "一周豆瓣热门影视|二十年后，这帮苏格拉老炮儿还是那么嗨",
          content: "三个榜单的冠军与上周一样，冠军们大概孤独求败",
          src:"media",
          author: "豆瓣",
        },
      ],
    };
  },
  mounted() {
    let timer = setInterval(() => {
      if (this.current == 2) {
        this.current = 0;
      } else {
        this.current++;
      }
    }, 3000);
  },
};
</script>
<style src="./index.css">

</style>